<template>
  <div class="role-list">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title">
      <h2>部门管理</h2>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
    </div>

    <!-- 表格主体 -->
    <div class="role-list-content">
      <!-- 头部筛选 -->
      <div class="role-list-search" style="background: linear-gradient(90deg, #23313c 0%, #1e2f43 50%, #1f304e 100%)">
        <div class="search-header">
          <img src="../../assets/img/search.png" alt="">
          <span>筛选查询</span>
        </div>
        <div class="search-content">
          <span>部门名称:</span>
          <input class="dap-input" type="text" v-model="searchName" maxlength="20" placeholder="请输入部门名称">
          <div class="search-btn">
            <span class="dap-button" @click="searchRole">查询</span>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="role-list-table">

        <div class="table-title">
          <div class="left">
            <img src="../../assets/img/user-list-icon.png" alt="">
            <span>部门列表</span>
          </div>
          <div class="right">
            <span class="dap-button" v-if="showAddDept" @click="addDepartment">添加</span>
          </div>
        </div>

        <div class="table-content">
          <el-table
            :data="tableData"
            v-loading="loadingShow"
            element-loading-text="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            height="10">
            <el-table-column
              prop="number"
              width="60px"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="部门名称"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="职能描述"
              align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" v-if="scope.row.deptDesc.length>7" effect="dark" :content=scope.row.deptDesc placement="top">
                  <span>{{scope.row.deptDescEm}}</span>
                </el-tooltip>
                <span v-if="scope.row.deptDesc.length<=7">{{scope.row.deptDesc}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="组织机构"
              align="center">
              <template slot-scope="scope" >
                <el-tooltip transition="showTooltip" v-if="scope.row.dictName.length>7" class="item" effect="dark" :content=scope.row.dictName placement="top">
                  <span>{{scope.row.dictNameEm}}</span>
                </el-tooltip>
                <span v-if="scope.row.dictName.length<=7">{{scope.row.dictName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateDate"
              label="更新时间"
              align="center">
            </el-table-column>
            <el-table-column
              label="是否启用"
              align="center"
              v-if="showUpdateIsRun">
              <template slot-scope="scope">
                <el-switch
                  v-model=scope.row.isRun
                  @change="isRunChange(scope.row)"
                  active-color="#13ce66"
                  inactive-color="#ff4642">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              v-if="showDelDept || showUpdateDept">
              <template slot-scope="scope">
                <el-button v-if="showUpdateDept" @click="editRole(scope.row,2)" type="text" size="small">编辑</el-button>
                <el-button v-if="showDelDept" :class="{delBtn:!scope.row.isRun}" :disabled="scope.row.isRun" @click="delRole(scope.row)" type="text"
                           size="small">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <dap-page :pageTotal="total" v-on:pageSizeChange="pageSizeChange" v-on:pageCurrentChange="pageChange" :currentPage="currentPage"></dap-page>
      <!-- 部门添加弹窗 -->
      <dap-popover ref="refDapAddDepartment" :titleText="titleText" @clickLeft="saveBtnFun" @clickRight="canBtnFun">
        <ul class="add-user-wrapper">
          <li style="height:54px;">
            <div class="add-user-item">
              <i class="red-star">*</i><span class="add-text">部门名称：</span>
              <input type="text" class="dap-input" :class="{'error-input-border':showAddDepartmentFail}" v-model="departmentName" placeholder="请输入部门名称" maxlength="20">
            </div>
            <p class="tip-text" v-show="showAddDepartmentFail">{{addNameFailMsg}}</p>
          </li>
          <li style="height:92px;">
            <div class="add-user-item">
              <i class="red-star">*</i><span class="add-text">职能描述：</span>
              <textarea style="height:70px;overflow:hidden;line-height:18px;resize: none;" maxlength="20" type="text" class="dap-input" :class="{'error-input-border':showAddDesFail}"  v-model="funDescription" placeholder="请输入描述内容"></textarea>
            </div>
            <p class="tip-text"  v-show="showAddDesFail">{{addDesFailMsg}}</p>
          </li>
          <li>
            <div class="add-user-item" style="height:30px;">
              <i class="red-star">*</i><span class="add-text">所属单位：</span>
              <p style="color:#969ca5">{{dictName}}</p>
            </div>
            <p class="tip-text" style="display:none;"></p>
          </li>
        </ul>
      </dap-popover>
      <!-- 删除角色弹窗 -->
      <!-- 删除用户弹窗 -->
      <dap-popover ref="delDepartmentPopup" @clickLeft='delBtnFun' @clickRight="canBtnFun">
        <p class="popover-text">{{delText}}</p>
      </dap-popover>
    </div>
    </div>
  </div>
</template>
<script>
  import {getDepartmentList,getSubordinateUnit,addDepartment,updateDepartment,isEnable,delDepartment} from '../../api/api'
  import {isChineseCharacter,svgPath,quitFullScreen} from '../../assets/js/utils'
  import {filterLogText} from '../../api/authority'
  import dapPage from '../view/dap-page.vue';
  import dapPopover from '../view/dap-popover.vue';

  export default {
    props: ['isChange','fullScreen'],
    data () {
      return {
        disabled:false,
        svgPath:svgPath,
        delText:'您确认删除该部门吗？',
        canShow: true,
        searchName: '',
        tableData: [],
        currentPage: 1,
        pageSize: 20,
        total: 0,
        departmentName: '',
        funDescription:'',
        showAddDesFail:false,
        showAddDepartmentFail: false,
        addNameFailMsg: 'something was worry', // 添加部门错误信息
        addDesFailMsg:'something was worry',
        delRoleName: '',
        dictName:'开封市人力资源和社会保障局',
        dictId:'',
        deptId:'',
        isAdd:1,
        delId:'',
        titleText:'添加部门',
        loadingShow:true,
        showAddDept:true,
        showUpdateIsRun:true,
        showDelDept:true,
        showUpdateDept:true
      }
    },
    components: {
      dapPage,
      dapPopover
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      }
    },
    mounted () {
      console.log(JSON.parse(sessionStorage.getItem('sessionUser')))
      //权限按钮
      let permissionObj = Object.keys(JSON.parse(sessionStorage.getItem('sessionUser')).perminsStrlist);
      //添加
      this.showAddDept = permissionObj.includes(`permission_30021`);
      //是否启用
      this.showUpdateIsRun = permissionObj.includes(`permission_30022`);
      //编辑按钮
      this.showUpdateDept = permissionObj.includes(`permission_30023`);
      //删除按钮
      this.showDelDept = permissionObj.includes(`permission_30024`);
      // 发送获取审核列表请求
      this.getData()
      getSubordinateUnit('dept/findUnit').then(res=>{
        if(res.code==0){
          this.dictId = res.data[0].dictId;
          this.dictName = res.data[0].dictName;
        }
      })
    },
    methods: {
      // 取消全屏
      closeAll () {
        quitFullScreen();
      },
      getData(){
        this.loadingShow = true;
        getDepartmentList('dept/findByName',this.searchName,this.currentPage,this.pageSize).then(res=>{
          if(res.code==0){
            res.data.list.map((item,index)=>{
              item.number = (this.currentPage-1)*this.pageSize+index+1;
              item.isRun=Boolean(item.isRun)
              item.deptDescEm = filterLogText(item.deptDesc);
              item.dictNameEm = filterLogText(item.dictName);
            })
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loadingShow = false;
          }
        })
      },
      searchRole () {
        this.getData()
      },
      editRole (row) {
        // 编辑角色名称
        this.isAdd = 2;
        this.titleText = '编辑部门';
        this.departmentName = row.deptName;
        this.funDescription = row.deptDesc;
        this.deptId = row.deptId;
        this.$refs.refDapAddDepartment.show();
      },
      //是否启用
      isRunChange(data){
        isEnable('dept/updateIsRun',data.deptId ,data.isRun?1:0)
      },
      //点击删除
      delRole (row) {
        console.log(row)
        this.delId = row.deptId;
        this.$refs.delDepartmentPopup.show()
      },
      // 取消编辑添加的回调
      canBtnFun(){
        this.showAddDesFail = false;
        this.showAddDepartmentFail = false;
        this.departmentName = '';
        this.funDescription = '';
        this.delText = '您确认删除该部门吗？';
      },
      //删除按钮
      delBtnFun(){
        delDepartment('dept/delDept',this.delId).then(res=>{
          if(res.code==0){
            this.getData();
            this.$refs.delDepartmentPopup.hide()
            this.$message({
              message: '删除成功',
              center: true,
              type: 'success',
            });
          }else if(res.code==12){
            this.$refs.delDepartmentPopup.hide()
            // this.delText = res.message;
            this.$message({
              message: res.message,
              center: true,
              type: 'info',
            });
          }
        })
      },
      //点击添加按钮
      addDepartment () {
        this.isAdd = 1;
        this.titleText = '添加部门';
        this.$refs.refDapAddDepartment.show();
      },
      //保存按钮
      saveBtnFun (){
        let isCanSave = 0;
        if(isChineseCharacter(this.departmentName)){
          this.showAddDepartmentFail = false;
          isCanSave = isCanSave +1;
        }else{
          this.showAddDepartmentFail = true;
          if(this.departmentName==''){
            this.addNameFailMsg = '部门名称不能为空';
          }else{
            this.addNameFailMsg = '部门名称格式不正确';
          }
        }
        // if(isChineseCharacter(this.funDescription)){
        //   this.showAddDesFail = false;
        //   isCanSave = isCanSave +1;
        // }else{
        //   this.showAddDesFail = true;
        //   if(this.funDescription==''){
        //     this.addDesFailMsg = '职能描述不能为空';
        //   }else{
        //     this.addDesFailMsg = '职能描述格式不正确';
        //   }
        // }
        if(this.funDescription==''){
          this.showAddDesFail = true;
          this.addDesFailMsg = '职能描述不能为空';
        }else{
          this.showAddDesFail = false;
          isCanSave = isCanSave +1;
        }
        if(isCanSave==2){
          if(this.isAdd==1){
            addDepartment('dept/addDept',this.departmentName,this.funDescription, this.dictId ).then(res=>{
              if(res.code==0){
                this.showAddDesFail = false;
                this.showAddDepartmentFail = false;
                this.departmentName = '';
                this.funDescription = '';
                this.$message({
                  message: '部门添加成功！',
                  center: true,
                  type: 'success',
                });
                this.$refs.refDapAddDepartment.hide();
                this.pageChange(1)
              }else if(res.code==11){
                this.showAddDepartmentFail = true;
                this.addNameFailMsg = res.message;
              }
            })
          }else{
            updateDepartment('dept/updateDept',this.departmentName,this.funDescription, this.dictId,this.deptId).then(res=>{
              if(res.code==0){
                this.showAddDesFail = false;
                this.showAddDepartmentFail = false;
                this.departmentName = '';
                this.funDescription = '';
                this.$message({
                  message: '部门编辑成功！',
                  center: true,
                  type: 'success',
                });
                this.$refs.refDapAddDepartment.hide();
                this. pageChange(1)
              }else if(res.code==11){
                this.showAddDepartmentFail = true;
                this.addNameFailMsg = res.message;
              }
            })
          }
        }
      },
      pageSizeChange(val) {
        this.pageSize = val;
        this.getData()
      },
      pageChange(val) {
        this.currentPage = val;
        this.getData()
      }
    }
  }
</script>
<style scoped>
  @import '../../assets/css/authority.css';
  .delBtn{
    color: #e54c77;
  }
  .role-list {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .role-list-content {
    margin: 30px 30px 0 30px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /*搜索*/
  .role-list-search {
    height: 130px;
    background: linear-gradient(left, #23313c 0%, #1e2f43 50%, #1f304e 100%);
  }

  .role-list-search .search-header {
    height: 60px;
    border-bottom: 1px solid #283f59;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-header > img {
    width: 18px;
    height: 18px;
    padding-left: 18px;
  }

  .role-list-search .search-header > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-search .search-content {
    height: 70px;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-content > span {
    font-size: 12px;
    padding-left: 18px;
    color: #9b9aad;
  }

  .role-list-search .search-content > input {
    margin-left: 10px;
  }

  .role-list-search .search-content .search-btn > span {
    margin-left: 42px;
  }

  /*表格*/
  .role-list-table {
    margin-top: 20px;
    background: #1b2b44;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .role-list-table .table-title {
    height: 60px;
    background: #1b2b44;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .role-list-table .table-title .left {
    display: flex;
    align-items: center;
  }

  .role-list-table .table-title .left > img {
    width: 18px;
    height: 18px;
    padding-left: 18px;
  }

  .role-list-table .table-title .left > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-table .table-title .right .dap-button {
    margin-right: 18px;
  }

  .role-list-table .table-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  /* 角色弹窗 */
  .add-user-wrapper{
    font-size: 12px;
    padding:30px 30px 0px 26px;
  }
  .add-user-wrapper .add-user-item{
    display: flex;
    align-items: center;
    /*height:60px;*/
  }
  .add-user-wrapper>li:last-child{
    position:relative;
    z-index: 1;
  }
  .add-user-wrapper .add-text{
    width: 70px;
  }
  .add-user-wrapper .dap-input{
    flex: 1 1 auto;
    height:26px;
  }
  .tip-text{
    height:24px;
    line-height:24px;
    padding-left: 80px;
    color: red;
  }

  .red-star{
    color: red;
    position:relative;
    top:3px;
    margin-right: 2px;
  }
  .worry-input{
    border:solid 1px red;
  }
</style>

<!--修改框架样式-->
<style>
  .delBtn{
    color: #e54c77;
  }

  /*.delBtn:active {*/
    /*color: red;*/
  /*}*/

  .el-button.is-disabled,
  .el-button.is-disabled:focus,
  .el-button.is-disabled:hover {
    color: #666;
  }
  .item{
    cursor:pointer;
  }
  .popover-text{
    text-align: center;
    padding-top:32px;
    font-weight: normal;
  }
  .toastInfo{
    color:#fff;
  }
  .showTooltip{
    opacity:1;
  }
</style>
